import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";

// 引入编辑器组件

// 安装---npm install braft-editor --save --force
// npm install braft-utils --save --force 
import { ContentUtils } from "braft-utils";
import BraftEditor from "braft-editor";
// 引入编辑器样式
import "braft-editor/dist/index.css";

function RichText() {
  // 设置编辑器初始内容
  useEffect(() => {}, []);

  // 编辑器文本
  const [editorValue, setEditorValue] = useState(
    BraftEditor.createEditorState("")
  );

  // 富文本信息改变的回调
  const handleChange = useCallback((e: any) => {
    setEditorValue(e);
  }, []);

  // 在光标位置插入自定义文本
  const insertTextFu = useCallback(() => {
    const newTxt = ContentUtils.insertText(editorValue, "66666");
    // insertHTML('<p><span color="#ff0000;">Hello World!</span></p>')
    setEditorValue(newTxt);
  }, [editorValue]);

  // 点击确定
  const btnOk = useCallback(() => {
    console.log("内容", editorValue.toHTML());
    const txt: string = editorValue.toHTML();
    if (
      txt.replaceAll("<p>", "").replaceAll("</p>", "").replaceAll(" ", "") ===
      ""
    )
      return alert("不能为空!");
  }, [editorValue]);

  return (
    <div className={styles.RichText}>
      <div className="txtBox">
        <BraftEditor value={editorValue} onChange={(e) => handleChange(e)} />
      </div>

      {/* 编辑器内容 */}
      <br />
      <button onClick={btnOk}>点击确定获取文本</button>
      <br />
      {/* 插入图片 */}
      <br />
      <button onClick={insertTextFu}>在光标位置插入内容</button>
    </div>
  );
}

const MemoRichText = React.memo(RichText);

export default MemoRichText;
